<!DOCTYPE html>
<html>
<head>
    <title>Reload subresource when type changes.</title>
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
</head>
<body>
    <img src="resources/reload-subresource-when-type-changes.js">
    <link rel="prefetch" href="/loading/resources/image1.png">
    <script src="/loading/resources/image2.png"></script>

    <script>

        var expectedScriptLoaded = false;
    </script>
    <script src="resources/reload-subresource-when-type-changes.js"></script>
    <script>
        test(function() {
            assert_true(expectedScriptLoaded);
        }, "Script should load as script after being loaded as image.");
       
        async_test(function() {
            var image = document.createElement("img");
            image.onload = this.step_func(function() {
                assert_equals(image.naturalWidth, 400);
                this.done();
            });
            image.onerror = this.step_func(function(e) {
                console.log(e);
                assert_unreached('The image should have loaded, but failed.');
            });
            image.src = '/loading/resources/base-image1.png';
        }, "Image should load after being prefetched.");

        async_test(function() {
            var image = document.createElement("img");
            image.onload = this.step_func(function() {
                assert_equals(image.naturalWidth, 400);
                this.done();
            });
            image.onerror = this.step_func(function(e) {
                assert_unreached('The image should have loaded, but failed.');
            });
            image.src = '/loading/resources/base-image2.png';
        }, "Image should load after failing to load as script.");
    </script>
</body>
</html>
